
import React, { useState, useEffect } from "react";
import "./index.scss";
import {
  PageHeader,
  Input,
  Divider,
  Button,
  Table,
  // Pagination,
  Space,
  Row,
  Col,
  Form, Switch, message
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import AllRole from "../../../../api/ykh/role_ykh"
import moment from "moment";
//Header表头
const routes = [
  {
    path: "index",
    breadcrumbName: "设置",
  },
  {
    path: "first",
    breadcrumbName: "角色管理",
  },
];
//删除
const delrole = (id) => {
  console.log(id);
  AllRole.DeleteRole(id).then((res) => {
    if (res.code == 200) {
      message.success('删除成功');
      window.location.reload();
    } else {
      message.error('删除失败');
    }
  })
}
//Content表格列数据
const columns = [
  {
    title: "角色名称",
    dataIndex: "roleName",
  },
  {
    title: "角色描述",
    dataIndex: "remark",

  },
  {
    title: "角色人数",
    dataIndex: "roleSort",
  },
  {
    title: "状态",
    dataIndex: "status",
    render: (_, record) => (
      <Space size="middle">
        < Switch defaultChecked onChange={onChange} checked={record.status === '0' ? true : false} />
      </Space>
    )
  },
  {
    title: "添加人",
    dataIndex: "createBy",
  },
  {
    title: "添加时间",
    dataIndex: "updateTime",
  },
  {
    title: "操作",
    dataIndex: "operation",
    render: (_, record) => (
      <Space size="middle">
        <Button type='link'>编辑</Button>
        <Button type='link' onClick={() => { delrole(record.roleId) }}>删除</Button>
      </Space>
    ),
  },
];
//开关
const onChange = (checked) => {
  console.log(`switch to ${checked}`);
};

export default function RoleManagement() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (newSelectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 查询
  const [searchForm] = Form.useForm();
  const onFinish = () => {
    // console.log(searchForm.getFieldsValue(), "chaxun");
    role(searchForm.getFieldsValue());
  };
  // 重置
  const reset = () => {
    searchForm.setFieldsValue({ "name": "" });
    role({})
  }

  //表格数据
  const [dataSource, setDataSource] = useState([])
  //获取数据
  const role = (obj) => {
    AllRole.findAllRole(obj).then((res) => {
      let a = res.data
      let Datas = [...a];
      for (let i = 0; i < Datas.length; i++) {
        ;
        Datas[i].updateTime = moment(Datas[i].updateTime).format("YYYY/MM/DD HH:mm:ss");
      }
      setDataSource(Datas)
    });
  };
  //生命周期
  useEffect(() => {
    role({});

  }, []);



  //跳转
  const Navigate = useNavigate();
  //页码
  const showTotal = (total) => `数量 ${total} 条`;
  return (
    <>
      <div className="Header">
        <PageHeader
          className="site-page-header"
          title="角色管理"
          breadcrumb={{
            routes,
          }}
        />
        <Divider plain></Divider>
        <Form
          initialValues={{
            size: "large",
          }}
          colon={false}
          form={searchForm}
          name="control-hooks"
          size={"middle"}
        >
          <Row className="" gutter={40}>
            <Col span={8}>
              <Form.Item labelCol={{ offset: 1 }} name="name" label="角色名称">
                <Input placeholder="请输入"></Input>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <div className="abs-btns">
          <Space>
            <Button type="primary" size={"middle"} onClick={onFinish}>
              查询
            </Button>
            <Button size={"middle"} onClick={() => { reset() }}>重置</Button>
          </Space>
        </div>
      </div>
      <div className="Content ">
        <div className="flex2">
          <div className="Content-left">
            <h3 className="Advertising-Banner-List">角色列表</h3>
          </div>
          <div className="Content-right">
            <Button
              type="primary"
              className="newBtn"
              icon={<PlusOutlined />}
              onClick={() => {
                Navigate("/home/setting/role/addrole");
              }}
            >
              新建
            </Button>
            <Button className="batchBtn">批量操作</Button>
          </div>
        </div>

        <Table
          className={StyleSheet.rowStyle}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource}
          pagination={{
            total: dataSource.length,
            showTotal: showTotal,
            showSizeChanger: true,
            showQuickJumper: true,
          }}
          rowKey={record => record.roleId}
        />

      </div>
    </>
  );
}
